window.onload = function () {
	searchColor();
	timeBack();
	bannerEffect();
}
// 搜索块的背景颜色
function searchColor() {
	var banner = document.querySelector('.jd_banner');
	var bannerHeight = banner.offsetHeight;
	var search = document.querySelector('.jd_search');
	window.onscroll = function () {
		var searchTop;
		if (document.body.scrollTop) {
			searchTop = document.body.scrollTop;
		} else if (document.documentElement.scrollTop) {
			searchTop = document.documentElement.scrollTop;
		}
		var opacity = 0;
		if (searchTop <= bannerHeight) {
			opacity = searchTop / bannerHeight;
			search.style.backgroundColor = 'rgba(233,35,34,'+opacity+')';
		}
	}
}
// 倒计时
function timeBack() {
	var spans = document.querySelector('.jd_sk_time').querySelectorAll('span');
	var time = 3600;
	var timerId = setInterval(function () {
		time--;
		if (time < 0) {
			clearInterval(timerId);
			return;
		}
		var hour = Math.floor(time / 60 / 60);
		/*得到小数取余就是剩下的秒数 再除以60取整得到的就是分钟数*/
		var minute = Math.floor(time % 3600 / 60);
		var second = Math.floor(time % 60);
		spans[0].innerHTML = Math.floor(hour / 10);
		spans[1].innerHTML = Math.floor(hour % 10);
		spans[3].innerHTML = Math.floor(minute / 10);
		spans[4].innerHTML = Math.floor(minute % 10);
		spans[6].innerHTML = Math.floor(second / 10);
		spans[7].innerHTML = Math.floor(second % 10);
	}, 1000);
}
function bannerEffect() {
	// 获得轮播图的结构
	var banner = document.querySelector('.jd_banner');
	// 获得banner里面的第一个ul
	var imgBox = banner.querySelector('ul:first-of-type');
	// 获得第一张图片
	var first = imgBox.querySelector('li:first-of-type');
	// 获得最后一张图片
	var last = imgBox.querySelector('li:last-of-type');
	// 将第一张图片的克隆图插入到轮播图的最后一张图片之后
	imgBox.appendChild(first.cloneNode(true));
	// 将最后一张图片的克隆图插入到轮播图的第一张图片之前
	// insertBefore(要插入的元素, 被插入的元素)
	imgBox.insertBefore(last.cloneNode(true), imgBox.firstChild);

	var index = 1;
	// 设置对应的样式
	// 获得所有的li
	var lis = imgBox.querySelectorAll('li');
	// 获得li的个数
	var count = lis.length;
	// 得到banner的长度
	var bannerWidth = banner.offsetWidth;
	// 重新设置imgBox的总长度
	imgBox.style.width = count * bannerWidth + 'px';
	// 重新设置图片的长度
	for (var i = 0; i < lis.length; i++) {
		lis[i].style.width = bannerWidth + 'px';
	}
	// 设置偏移值
	imgBox.style.left = - bannerWidth + 'px';

	window.onresize = function () {
		bannerWidth = banner.offsetWidth;
		// 重新设置imgBox的总长度
		imgBox.style.width = count * bannerWidth + 'px';
		// 重新设置图片的长度
		for (var i = 0; i < lis.length; i++) {
			lis[i].style.width = bannerWidth + 'px';
		}
		// 设置偏移值
		/*left是只有定位元素才可以使用的 不能使用absolute定位
		因为absolute定位不占空间 子元素都是根据他来进行定位的
		所以应该用绝对定位撑开整个容器*/
		imgBox.style.left = - index * bannerWidth + 'px'; 
	}
	// 点标记
	var setIndicator=function(index){
       var indicators=banner.querySelector("ul:last-of-type").querySelectorAll("li");
       /*先清除其它li元素的active样式*/
       for(var i=0;i<indicators.length;i++){
           indicators[i].classList.remove("active");
       }
       /*为当前li元素添加active样式*/
       indicators[index - 1].classList.add("active");
   }
	// 轮播图自动播放
	var timerId;
	var timeStart = function () {
		timerId = setInterval(function () {
			index++;
			// 给轮播图添加过渡效果
			imgBox.style.transition = 'left 0.5s ease-in-out';
			// 重新设置轮播图的偏移
			imgBox.style.left = -(bannerWidth * index) + 'px';
			// 因为是同时进行的 还没有到最后一个就开始做判断 所以需要加上延迟操作
			// 如果偏移到了最后一张图片的位置将偏移重新设置到第二张图片的位置
			/*setTimeout(function () {
				if (index == count - 1) {
				index = 1;
				// 取消过渡效果
				imgBox.style.transition = 'none';
				imgBox.style.left = -(bannerWidth * index) + 'px';
				}
			}, 500);*/		
		}, 1000);
	}
	timeStart();

	// 轮播图手动播放
	var startX, moveX, distanceX;
	var isEnd = true;
	imgBox.addEventListener('touchstart', function(e) {
		clearInterval(timerId);
		startX = e.targetTouches[0].clientX;
	});
	imgBox.addEventListener('touchmove', function (e) {
		if (isEnd == true) {
			moveX = e.targetTouches[0].clientX;
			distanceX = moveX - startX;
			imgBox.style.transition = 'none';
			imgBox.style.left = (-bannerWidth * index + distanceX) + 'px';
		}	
	});
	imgBox.addEventListener('touchend', function (e) {
		isEnd = false;
		if (Math.abs(distanceX) > 100) {
			if (distanceX > 100) { //上一张
				index--;
			} else { // 下一张
				index++;
			}
			// 翻页
			// 重新设置过渡效果
			imgBox.style.transition = 'left 0.5s ease-in-out';			
			// 重新设置偏移
			imgBox.style.left = -(index * bannerWidth) + 'px'
		} else if (Math.abs(distanceX) > 0) {
			imgBox.style.transition = 'left 0.5s ease-in-out';
			imgBox.style.left = -(index * bannerWidth) + 'px';
		}
		// timeStart();
		startX = 0;
		moveX = 0;
		distanceX = 0;
	});

	imgBox.addEventListener('webkitTransitionEnd', function () {
		if (index == count - 1) {
			index = 1;
			imgBox.style.transition = 'none';
			imgBox.style.left = -index * bannerWidth + 'px';
		} else if (index == 0) {
			index = count - 2;
			imgBox.style.transition = 'none';
			imgBox.style.left = -index * bannerWidth + 'px';
		}
		setIndicator(index);
		setTimeout(function () {
			isEnd = true;
			clearInterval(timerId);
			timeStart();
		}, 10);
	});
}